---
title: Theming - Material Tailwind
description: Learn how to customize and set your own theme for Material Tailwind components.
navigation: ["theming", "class-name"]
github: theming
prev: what-is-tailwind-css
next: colors
---

# Theming - Material Tailwind

<span id="theming" className="scroll-mt-48" />
Customize @material-tailwind/html with your own theme. You can change the base styles
like the colors, typography, box-shadows and breakpoints as well as the components
style.

@material-tailwind/html is customizable using the <Code>tailwind.config.js</Code> and you can set your own theme and styles through the Tailwind CSS configurations for all of the components.

---

## The `class` Attribute

<span id="class-name" className="scroll-mt-32" />

Each component has a <Code>class</Code> attribute that you can use to add tailwindcss classnames or your own custom classnames.

The <Code>class</Code> attribute overrides the tailwindcss classnames for a component and sometimes you need to use the <Code>!</Code> modifier before the tailwindcss classnames to override the classnames for a component.

e.g. <Code>!text-blue-500</Code>

```html
<button class="button button-pink !bg-blue-500 px-4" data-ripple-light="true">
  Button
</button>
```
